<.focus_box>
  <:title>
    Your account is being upgraded...
  </:title>

  <:subtitle>
    Thank you for upgrading your subscription! We're still working on
    upgrading your account, and you'll be automatically redirected in a few
    seconds.
  </:subtitle>

  <p hidden id="timeout-notice" class="text-gray-500 dark:text-gray-200 text-sm">
    Your subscription is taking longer than usual to upgrade. If you're not
    redirected soon, please contact <a class="text-indigo-500" href="mailto:hello@plausible.io">hello@plausible.io</a>.
  </p>

  <div class="loading my-12 mx-auto">
    <div></div>
  </div>

  <script>
    const PING_SUBSCRIPTION_API = "<%= Routes.billing_path(@conn, :ping_subscription) %>"
    const REDIRECT_TO = "<%= Routes.settings_path(@conn, :subscription) %>"
    const PING_EVERY_MS = 2000
    const TIMEOUT_AFTER_MS = 15000

    const ping = async function(fun) {
      let result = {}

      while (!result.is_subscribed) {
        await wait();
        const response = await fetch(PING_SUBSCRIPTION_API)
        result = await response.json()
      }

      window.location = REDIRECT_TO
    }

    const wait = function() {
      return new Promise(resolve => { setTimeout(resolve, PING_EVERY_MS) })
    }

    setTimeout(() => {
      document.getElementById("timeout-notice").removeAttribute("hidden")
    }, TIMEOUT_AFTER_MS)

    // Pings pingSubscriptionUrl every 2 seconds until an active subscription
    // is created from Paddle webhooks.
    ping()
  </script>
</.focus_box>
